<template>
  <div class="storeDetails">
    <Header title="店铺" />
    <div class="content">
      <div class="img" />
      <div class="foodClassify">
        <div class="name">
          {{ title }}
          <img :src="img" class="store_img" alt="" />
        </div>
        <div class="classify">
          <van-tabs color="#ffc400">
            <van-tab v-for="(i, index) in storeData" :title="i.name" :key="index">
              <FoodList :index="index" :foodData="i.data" />
            </van-tab>
          </van-tabs>
        </div> 
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="service" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="$store.state.cartList.length"
        @click="toCart"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="handleAddCart"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="clickBuy" />
    </van-goods-action>    
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
import FoodList from "./components/FoodList";
import {Toast} from "vant";
export default {
  components: {
    Header,
    FoodList,
  },

  data() {
    return {
      title: "美食店",
      img: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
      storeData: [
        {
          name: "点菜",
          data: {
            content: "点菜",
            items: [
              {
                text: "热销单品",
                children: [
                  {
                    pic: "https://p1.meituan.net/xianfu/ec58e028ff23c3746d81c5b5dfe4f7f5359216.jpg@380w_214h_1e_1c",
                    title: "招牌菜品1",
                    num: 0,
                    price: 25.0,
                    id: 0,
                    add: true,
                  },
                  {
                    pic: "https://img.meituan.net/msmerchant/cb8efa384bee687e4ee99a0ee12b5f0371530.jpg@130w_130h_1e_1c",
                    title: "招牌菜品2",
                    num: 0,
                    price: 10.0,
                    id: 1,
                    add: true,
                  },
                ],
              },
              {
                text: "主食",
                children: [
                  {
                    pic: "https://img2.baidu.com/it/u=586153878,1850991775&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
                    title: "米饭",
                    num: 0,
                    price: 2.0,
                    id: 3,
                    add: true,
                  },
                  {
                    pic: "https://p1.meituan.net/208.126/deal/e7d1d3a22496de3cddccf374db3d77ac10282399.jpg@100w_100h_1e_1c",
                    title: "夏威夷披萨",
                    num: 0,
                    price: 39.0,
                    id: 4,
                    add: true,
                  },
                ],
              },
              {
                text: "超级折扣",
                children: [
                  {
                    pic: "https://p0.meituan.net/208.126/deal/c5b5b1f07c443d21a4af671a266e0ab438631.jpg@100w_100h_1e_1c",
                    title: "套餐1+米饭",
                    num: 0,
                    price: 118.0,
                    id: 5,
                    add: true,
                  },
                  {
                    pic: "https://qcloud.dpfile.com/pc/CScEZNoCmTIx9yFOk36FB1FwZqy3SKSsjtvGZCHfmXfJjFxV5NctbUMbVLoTcCkc5g_3Oo7Z9EXqcoVvW9arsw.jpg",
                    title: "套餐2+米饭",
                    num: 0,
                    price: 99.0,
                    id: 6,
                    add: true,
                  },
                ],
              },
            ],
          },
        },
        { name: "评价", data: { content: "" } },
        { name: "商家", data: { content: "" } },
      ],
    }
  },
  computed: {

  },  
  mounted(){
    //this.init();
  },
  methods: {
    // 客服的点击
    service() {
      Toast.fail("敬请期待...");
    },

    // 跳转购物车
    toCart() {
      this.$router.push("./cart");
    },

    // 加入购物车
    handleAddCart(type) {
      let newList = [];
      this.storeData.forEach((item) => {
        if(!!item.data.items){
          item.data.items.forEach((items) => {
            items.children.forEach((itemss) => {
              if (itemss.num > 0) {
                newList.push(itemss);
              }
            });
          });
        }
      });
      if (newList.length === 0) {
        Toast("请选择商品");
        return;
      }
      
      this.$store.commit("ADDCART", this.$store.state.cartList.concat(newList));
      type === "buy" ? this.toCart() : "";    
    },

    // 立即购买点击
    clickBuy() {
      this.handleAddCart("buy");
    },    
  },  
  mounted() {
  
  },
};
</script>

<style lang='less' scoped>
  .storeDetails {
    height: 100%;
    display: flex;
    flex-flow: column;
    .content {
      flex: 1;
      overflow-y: auto;
      .img {
        background: url("http://t13.baidu.com/it/u=3027736618,99608632&fm=224&app=112&f=JPEG?w=500&h=500") no-repeat center/cover;
        width: 100%;
        height: 150px;
      }
      .foodClassify {
        height: 500px;
        background-color: #fff;
        margin-top: -30px;
        border-radius: 20px 20px 0 0;

        .classify {
          margin-top: 10px;
        }
        .name {
          display: flex;
          padding: 20px;
          font-size: 30px;
          justify-content: space-between;
          .store_img {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            margin-top: -30px;
          }
        }
      }
    }
  }
</style>